// import G6 from '@antv/g6/build/g6'
import { uniqueId } from '../../utils'
// import Shape from '@antv/g/src/shapes'
import G6 from '../../../../../../public/g6/index'
const circleNode = {
  init() {
    G6.registerNode('circleNode', {
      draw(cfg, group) {
        let size = cfg.size
        if (!size) {
          size = [80]
        }
        // 此处必须是NUMBER 不然bbox不正常
        const radius = cfg.size / 2
        const color = cfg.color
        const mainId = 'rect' + uniqueId()
        const shape = group.addShape('circle', {
          attrs: {
            id: mainId,
            x: 0,
            y: 0,
            r: radius,
            stroke: '#ced4d9',
            fill: '#fff' // 应用节点样式
          }
        })
        group.addShape('circle', {
          attrs: {
            x: 0,
            y: 0,
            r: radius,
            fill: color,
            stroke: '#ced4d9',
            parent: mainId
          }
        })
        if (cfg.label) {
          group.addShape('text', {
            attrs: {
              id: 'label' + uniqueId(),
              x: 0,
              y: 0,
              textAlign: 'center',
              textBaseline: 'middle',
              text: cfg.label,
              parent: mainId,
              fill: '#fff' // label的字体颜色
            }
          })
        }
        if (cfg.inPoints) {
          for (let i = 0; i < cfg.inPoints.length; i++) {
            const id = 'circle' + uniqueId()
            let setX = cfg.inPoints[i][0]
            let setY = cfg.inPoints[i][1]
            // 循环出上下左右四个点连线
            group.addShape('circle', {
              attrs: {
                id: 'circle' + uniqueId(),
                parent: id,
                x: radius * setX,
                y: radius * setY,
                r: 10,
                isInPointOut: true,
                isOutPointOut: true,
                fill: '#1890ff',
                opacity: 0
              }
            })
            group.addShape('circle', {
              attrs: {
                id: id,
                x: radius * setX,
                y: radius * setY,
                r: 3,
                isInPoint: true,
                isOutPoint: true,
                fill: '#fff',
                stroke: '#1890ff',
                opacity: 0
              }
            })
          }
        }

        // 添加文本、更多图形
        return shape
      },
      //设置状态
      setState(name, value, item) {
        const group = item.getContainer()
        const shape = group.get('children')[0] // 顺序根据 draw 时确定

        const children = group.findAll(g => {
          return g._attrs.parent === shape._attrs.id
        })
        const circles = group.findAll(circle => {
          return circle._attrs.isInPoint || circle._attrs.isOutPoint
        })
        const selectStyles = () => {
          shape.attr('fill', '#f3f9ff')
          shape.attr('stroke', '#6ab7ff')
          shape.attr('cursor', 'move')
          children.forEach(child => {
            child.attr('cursor', 'move')
          })
          circles.forEach(circle => {
            circle.attr('opacity', 1)
          })
        }
        const unSelectStyles = () => {
          shape.attr('fill', '#fff')
          shape.attr('stroke', '#ced4d9')
          circles.forEach(circle => {
            circle.attr('opacity', 0)
          })
        }
        switch (name) {
          case 'selected':
          case 'hover':
            if (value) {
              selectStyles()
            } else {
              unSelectStyles()
            }
            break
        }
      }
    })
  }
}

export default circleNode
